<template>
	<view class="container">
		<view class="content">
			<!-- ============================================   返回按钮   ============================================ -->
			<view class="backBtn" @click="back">
				<image src="https://community.chuangxiangdianli.com/images/goodsDetail/login_back.png" mode=""></image>
			</view>
			<!-- ============================================   轮播图   ============================================ -->
			<view class="goodsPic">
				<!-- <image :src="goodsData.goods_master_image" mode=""></image> -->
				<swiper class="swiper" indicator-dots="true" autoplay="true" interval="4000" duration="500">
					<swiper-item class="imgItem" v-for="(item, index) in goodsData.goods_images">
						<image :src="item" mode="scaleToFill" @click="viewImg(goodsData.goods_images, item)"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- ============================================   价格   ============================================ -->
			<view class="jiage p30">
				<view class="goods_price">￥<text>{{ goodsData.goods_price }}</text></view>
				<view class="kefu">
					<image src="https://community.chuangxiangdianli.com/images/goodsDetail/phone.png" mode=""></image>
					<text>联系店家</text>
				</view>
			</view>
			<!-- ============================================   新人首单优惠   ============================================ -->
			<view class="newPeople" v-if="false">
				<view>
					<image class="vipIcon" src="https://community.chuangxiangdianli.com/images/goodsDetail/vip.png" mode=""></image>
					<view>新人首单购买可解锁更多权益</view>
					<image class="backIcon" src="https://community.chuangxiangdianli.com/images/goodsDetail/hsang_arrow.png" mode=""></image>
				</view>
			</view>
			<!-- ============================================   店铺/商品名   ============================================ -->
			<view class="name">
				<view class="ziying" v-if="false">自营</view>
				<text>{{ goodsData.goods_name }}</text>
			</view>
			<!-- ============================================   活动   ============================================ -->
			<view class="actives" v-if="goodsData.full_reductions.length > 0" @click="openCx">
				<view class="cx">活动</view>
				<view class="active">
					<!-- 顺序：  1.秒杀 2. 满减 3. 优惠券 -->
					<!-- <view class="item">
						<view>满折</view>
						<view class="over"><text style="margin: 0 10rpx;">同一件商品，第二件享95折</text><text style="margin: 0 10rpx;">同一件商品，第二件享95折</text><text style="margin: 0 10rpx;">同一件商品，第二件享95折</text></view>
					</view> -->
					<view class="item" v-if="goodsData.full_reductions">
						<view>店铺满减</view>
						<view class="over">
							<text style="margin: 0 10rpx;" v-for="(item, index) in goodsData.full_reductions">
								满{{ item.use_money }}减{{ item.money }}
							</text>
						</view>
					</view>
					<view class="item" v-if="false">
						<view>领券</view>
						<view>
							<view class="yhq" v-for="(item, index) in goodsData.coupons">
								<text>满{{ item.use_money }}减{{ item.money }}</text>
								<image src="https://community.chuangxiangdianli.com/images/home/goods_biao.png" mode=""></image>
							</view>
							
						</view>
					</view>
				</view>
				<view class="ddd">
					<view></view>
					<view></view>
					<view></view>
				</view>
			</view>
			<!-- ============================================   商品规格   ============================================ -->
			<view class="spec" v-if="buySpecData.sku_name">
				<!-- 规格 -->
				<view class="goods_spec" @click="choseSpec">
					<view class="cx1">选择</view>
					<view class="spec_content">
						<view class="content_left">
							<view>{{ buySpecData.sku_name }}</view>
						</view>
						<view class="ddd" style="margin-top: 10rpx;">
							<view></view>
							<view></view>
							<view></view>
						</view>
					</view>
				</view>
				<!-- 快递 -->
				<view class="goods_spec" v-if="false">
					<view class="cx1">配送</view>
					<view class="spec_content">
						<view class="content_left">
							<view>广东省  深圳市  福田区我图村</view>
							<view>现货<text>23:00前付款，预计明天（11月28日）前送到</text></view>
						</view>
						<view class="ddd" style="margin-top: 10rpx;">
							<view></view>
							<view></view>
							<view></view>
						</view>
					</view>
				</view>
				<!-- 运费 -->
				<view class="goods_spec" v-if="false">
					<view class="cx1">运费</view>
					<view class="spec_content">
						包邮
					</view>
				</view>
			</view>
			<!-- ============================================   商品评价   ============================================ -->
			<view class="evaluate" @click="goComment" v-if="commentData.length > 0">
				<!-- title -->
				<view class="top">
					<view class="title">商品评价</view>
					<view class="praiseRate">好评度{{ rate }}%<image src="https://community.chuangxiangdianli.com/images/goodsDetail/shang_arow_1.png" mode=""></image></view>
				</view>
				<!-- 评论分类 -->
				<view class="evaluateClassify">
					<view>全部好评</view>
				</view>
				<!-- 评论 -->
				<view class="comment">
					<view class="user">
						<image :src="commentData[0].user.avatar" mode=""></image>
						
						<view class="userMsg">
							<view class="user_name">{{ commentData[0].user.nickname }}</view>
							<view>
								<uniRate :readonly="true" :size="18" :value="commentData[0].score"/>
							</view>
						</view>
					</view>
					<view class="comment_content">
						<view>
							{{ commentData[0].content }}
						</view>
						<view>
							<image v-if="commentData[0].image" v-for="(item) in commentData[0].image" :src="item" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 查看全部评价按钮 -->
				<view class="allComments">查看全部评价</view>
			</view>
			<!-- ============================================   商品详情   ============================================ -->
			<view class="goodInfo">
				<view class="info_title">商品详情</view>
				<view class="fuwenben" v-html="goodsData.goods_content_mobile"></view>
				<!-- <image src="../" mode=""></image> -->
			</view>
		</view>
		<!--  ============================================  底部tabar  ============================================ -->
		<view class="bottomBar">
			<!-- 店铺/购物车/收藏 -->
			<view class="bottom_left">
				<view class="item" @click="goStore">
					<image src="https://community.chuangxiangdianli.com/images/default/dian.png" mode=""></image>
					<view>店铺</view>
				</view>
				<view class="item" @click="goShopCar">
					<image src="https://community.chuangxiangdianli.com/images/default/che_s.png" mode=""></image>
					<view>购物车</view>
					<view class="num" v-if="shopCarNum > 0">{{ shopCarNum }}</view>
				</view>
				<view class="item" @click="favorite(0)">
					<image v-if="is_favorite" src="https://community.chuangxiangdianli.com/images/default/shoucang_s.png" mode=""></image>
					<image v-if="!is_favorite" src="https://community.chuangxiangdianli.com/images/default/shoucang_n.png" mode=""></image>
					<view>收藏</view>
				</view>
			</view>
			<view class="bottom_right">
				<view @click="chosebuyOrCar(1)">
					加入购物车
				</view>
				<view @click="chosebuyOrCar(2)">
					立即购买
				</view>
			</view>
		</view>
		<!--  ============================================   商品规格选择   ============================================ -->
		<choseSpec 
			:specFlag='specFlag'
			:specGood='specGood'
			:attrList='goodsData.attrList'
			:specObj='specObj'
			:buyNum='buyNum'
			:buySpecData='buySpecData'
			@closeSpec='closeSpec'
			@changeSpec='changeSpec'
			@handleSonOk='handleSonOk'
			@changeSpecName='changeSpecName'
		/>
		<!--  ===========================================   促销活动弹出框展示   ============================================ -->
		<view class="cx_mask" v-if="cxFlag">
			<view class="cx_message">
				<img class='close_img' @tap='closeCx' src="http://39.105.201.126:8080/images/chahao1.png" alt="">
				<view class="to_address_top" >
					优惠活动
					<view class="okbox"></view>
				</view>
				<view style="max-height: 600rpx;overflow-y: auto;">
				<view class="to_address_item" v-if="goodsData.full_reductions.length > 0" v-for="(item, index) in goodsData.full_reductions">
					<view class="txt_box over2" style="color: #999999;margin-right: 24rpx;">满减</view>
					<view class="txt_box over2" style="flex: 1;">满{{ item.use_money }}减{{ item.money }}</view>
					<!-- <view class="txt_box over2">></view> -->
				</view>
				</view>
				<view class="button_box" @tap='closeCx' style="background: #F1103A;">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '../../components/uni-rate/uni-rate.vue'
	import choseSpec from '../../components/choseSpec/choseSpec.vue'
	export default{
		components: {
			uniRate,
			choseSpec
		},
		data() {
			return{
				goods_id: '', // 传过来的商品id
				specFlag: false, // 商品规格弹窗
				cxFlag: false, // 促销弹出框
				goodsData: {}, // 商品数据
				is_favorite: false, // 商品是否收藏
				specGood: {},  // 单规格选择的商品数据
				specObj: {}, // 选中规格数据
				specNameStr: '',  // 选择中的规格名称
				buyNum: 1, // 加入购物车数量
				sku_id: '', // 多规格id
				buySpecData: {}, // 购买的多规格商品的数据
				buyOrCar: 0, // 单纯的选规格（0） 加入购物车（1）还是立即购买（2）
				commentData: [], // 商品评论
				total: 0, // 评论总数
				rate: 100, // 好评率
				shopCarNum: 0, // 购物车商品数量
			}
		},
		onLoad(option) {
			if (option.goods_id) {
				this.goods_id = option.goods_id
			}
		},
		onShow() {
			this.getGoodsDetail()
			this.getComment()
			this.isFavorite()
			this.getShopCarNum()
		},
		methods:{
			//  获取购物车数量
			getShopCarNum() {
				var that = this
				that.$mrequest({
					url: 'Mini/cart/cartCount',
					method: 'POST',
					callBack: function callBack (res) {
						console.log('数量请求成功', res)
						if (res.code == 200) {
							that.shopCarNum = res.data
						}
					},
					fail: function fail (res) {
						console.log('数量请求失败', res)
					}
				})
			},
			//  立即购买
			goJs() {
				var that = this
				let arr = []
				let obj = {}
				obj.buy_num = that.buyNum // 数量
				obj.goods_id = that.goods_id // 商品id
				if (that.buyOrCar == 0) {
					obj.sku_id = 0
				} else {
					obj.sku_id = that.sku_id
				}
				arr.push(obj)
				// console.log('打印arr,', arr)
				// return
				uni.navigateTo({
					url: '/other/settlement/index?arr=' + JSON.stringify(arr)
				})
			},
			//  获取商品详情数据
			getGoodsDetail() {
				var that = this
				this.$http.post({
					url: 'Mini/goods/goodsInfo',
					data: {
						goods_id: that.goods_id
					}
				}).then(res => {
					// console.log('商品详情数据',res)
					if (res.status) {
						that.goodsData = res.data
						// 选择规格弹出框数据
						if (res.data.attrList.length > 0) {
							for(let i = 0; i < res.data.attrList.length; i++){
								// console.log(i,res.data.attrList[i].specs[0].id)
								that.specObj[i] = res.data.attrList[i].specs[0].id
								// console.log('选中规格数据', that.specObj)
							}
							this.changeSpecName()
						} else {
							//  价格
							that.specGood.goods_price = res.data.goods_price
							//  主图
							that.specGood.goods_master_image = res.data.goods_master_image
							// 商品名称
							that.specGood.goods_name = res.data.goods_name
							// 商品库存
							that.specGood.goods_stock = res.data.goods_stock
							
						}
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'none'
					// })
				})
			},
			//  跳转商品的评论页面
			goComment() {
				console.log('跳转到商品的评论页面！');
				uni.navigateTo({
					url: './evaluation?id=' + this.goods_id
				})
			},
			// 返回按钮事件
			back() {
				uni.navigateBack()
			},
			// 选择商品规格
			choseSpec() {
				this.buyOrCar = 0
				this.specFlag = true
			},
			chosebuyOrCar(num){
				this.buyOrCar = num
				this.specFlag = true
			},
			//  关闭商品规格弹窗
			closeSpec() {
				this.specFlag = false
			},
			//  打开促销弹窗
			openCx() {
				this.cxFlag = true
			},
			//  关闭促销弹窗
			closeCx() {
				this.cxFlag = false
			},
			//  图片点击放大       图片点击预览后点击去取消预览会重新触发onshow，后期要看性能优化
			viewImg(item,url){
				uni.previewImage({
					current: url,
					urls: item
				})
			},
			//  判断商品是否收藏
			isFavorite() {
				var that = this
				this.$mrequest({
					url: 'Mini/favorites/isFav',
					method: 'POST',
					data: {
						fav_id: that.goods_id,
						is_type: 0
					},
					callBack: function callBack (res) {
						if (res.status) {
							if (res.data.isFav == 1) {
								that.is_favorite = true
							} else {
								that.is_favorite = false
							}
						} 
					},
					fail: function fail (res) {
						
					}
				})
			},
			//  收藏/关注
			favorite(num) {
				var that = this
				this.$http.post({
					url: 'Mini/favorites/isFav',
					data: {
						fav_id: that.goodsData.id,
						is_type: num
					}
				}).then(res => {
					//  isFav 为1 是已经收藏  0为未收藏
					if (res.data.isFav == 1) {
						that.$http.post({
							url: 'Mini/favorites/delFavorites',
							data: {
								fav_id: that.goodsData.id,
								is_type: num
							}
						}).then(res1 => {
							that.is_favorite = false
							if (res1.status) {
								uni.showToast({
									title: '取消收藏成功',
									icon: 'none'
								})
							}
						})
					} else {
						that.$http.post({
							url: 'Mini/favorites/addFavorites',
							data: {
								fav_id: that.goodsData.id,
								is_type: num
							}
						}).then(res1 => {
							if (res1.status) {
								that.is_favorite = true
								uni.showToast({
									title: '收藏成功',
									icon: 'none'
								})
							}
						})
					}
				})
			},
			//  时间戳转化
			timeStr(str) {
				let timeStr = ''
				let timer = new Date(str)
				let year = timer.getFullYear()
				let month = timer.getMonth() + 1 < 10 ? '0' + timer.getMonth() + 1 : timer.getMonth() + 1
				let day = timer.getDate() < 10 ? '0' + timer.getDate() : timer.getDate()
				let hour = timer.getHours() < 10 ? '0' + timer.getHours() : timer.getHours()
				let mins = timer.getMinutes() < 10 ? '0' + timer.getMinutes() : timer.getMinutes()
				timeStr = year + '-' + month +  '-' + day + ' ' +  hour + ':' +  mins
				console.log(timeStr)
				return timeStr
			},
			// 选择规格
			changeSpec(index, id) {
				this.specObj[index] = id
				this.$forceUpdate()
				console.log('打印规格', this.specObj[index])
			},
			//  点击选择够个确定按钮
			handleSonOk(num) {
				this.buyNum = num
				// 如果是多规格的商品
				if (this.goodsData.skuList) {
					var arr = []
					for (let key in this.specObj) {
						arr.push(this.specObj[key] + '')
					}
					this.goodsData.skuList.map((item, index) => {
						// 判读两个数组是否相等
						// console.log(JSON.stringify(arr), JSON.stringify(item.spec_id))
						if (JSON.stringify(arr.sort()) === JSON.stringify(item.spec_id.sort())) {
							this.sku_id = item.id
							// console.log(111, item.spec_id, this.sku_id, "芜湖")
						}
					})
					// console.log('给爷执行')
					// this.goJs()
				}
				this.specFlag = false
				this.addShopCar()
 			},
			//  改变组和规格名称
			changeSpecName() {
				var arr = []
				for (let key in this.specObj) {
					arr.push(this.specObj[key] + '')
				}
				this.goodsData.skuList.map((item, index) => {
					// 判读两个数组是否相等
					// console.log(JSON.stringify(arr), JSON.stringify(item.spec_id))
					if (JSON.stringify(arr.sort()) === JSON.stringify(item.spec_id.sort())) {
						this.sku_id = item.id
						this.buySpecData.sku_name = item.sku_name.toString()
						this.buySpecData.goods_price = item.goods_price
						this.buySpecData.goods_stock = item.goods_stock
						this.buySpecData.goods_image = this.goodsData.goods_master_image
						// this.specNameStr = item.
						console.log(111, item.spec_id, this.sku_id, "芜湖")
					}
				})
				console.log("buySpecData", this.buySpecData)
			},
			//  跳转到店铺
			goStore() {
				uni.navigateTo({
					url: '/other/store/index?id=' + this.goodsData.store_id 
				})
			},
			//  跳转到购物车
			goShopCar() {
				uni.switchTab({
					url: '/pages/shopCar/index'
				})
			},
			//  商品加入购物车
			addShopCar() {
				var that = this
				//  判断是进行 加入购物车 还是 直接购买  还是 只选择规格
				if (that.buyOrCar == 1) {
					//  加入购物车
					var data = {}
					data.goods_id = that.goodsData.id // 商品id
					data.buy_num = that.buyNum  // 要操作的商品数量
					// data.token = that.token  // 没啥屌用
					//  如果是多规格商品需要传 sku_id
					if (that.goodsData.skuList) {
						data.sku_id = that.sku_id
					} else {
						data.sku_id = ''
					}
					that.$http.post({
						url: 'Mini/cart/addCart',
						data: data
					}).then(res => {
						if (res.status) {
							that.getGoodsDetail()
							that.getShopCarNum()
							uni.showToast({
								title: '加入购物车成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								titlr: res.msg,
								icon: 'none'
							})
						}
					}).catch(res => {
						uni.showToast({
							titlr: res.msg,
							icon: 'none'
						})
					})
				} else {
					this.goJs()
				}
			},
			//  获取评论
			getComment() {
				var that = this
				this.$mrequest({
					url: `Mini/goods/goods_comments`,
					method: 'GET',
					data: {
						id: that.goods_id,
						is_type: 1
					},
					callBack: function callBack (res) {
						if (res.status) {
							that.commentData = res.data.data
							that.total = res.data.total
							that.rate = res.data.rate
						}
					},
					fail: function fail (res) {
						
					}
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.ddd{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 8rpx;
		width: 50rpx;
		&>view{
			height: 8rpx;
			width: 8rpx;
			border-radius: 50%;
		}
		&>view:nth-child(1){
			background: rgba(220, 220, 220, 1);
		}
		&>view:nth-child(2){
			background: rgba(196, 196, 196, 1);
		}
		&>view:nth-child(3){
			background: rgba(144, 144, 144, 1);
		}
	}
	
	.container{
		position: relative;
		background-color: rgba(247, 248, 249, 1);
	}
	.content{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background-color: rgba(247, 248, 249, 1);
		padding-bottom: 135rpx;
		box-sizing: border-box;
	}
	.backBtn{
		position: fixed;
		left: 30rpx;
		top: var(--status-bar-height);
		width: 40rpx;
		height: 40rpx;
		z-index: 99;
		&>image{
			display: block;
			height: 40rpx;
			width: 40rpx;
		}
	}
	.goodsPic{
		overflow: hidden;
		width: 100%;
		height: 803rpx;
		.swiper{
			width: 100%;
			height: 100%;
			.imgItem{
				height: 100%;
				width: 100%;
				/deep/ uni-image{
					height: 100%;
					width: 100%;
				}
			}
		}
		// &>image{
		// 	display: block;
		// 	height: 100%;
		// 	width: 100%;
		// }
	}
	.jiage{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 103rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		.goods_price{
			font-size: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #F55519;
			&>text{
				font-size: 48rpx;
			}
		}
		.kefu{
			font-size: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #4A4848;
			&>image{
				display: inline-block;
				width: 33rpx;
				height: 33rpx;
				margin-right: 10rpx;
			}
		}
	}
	.newPeople{
		width: 100%;
		height: 55rpx;
		padding: 0 23rpx;
		box-sizing: border-box;
		background-color: #fff;
		&>view{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 0 17rpx;
			height: 55rpx;
			background-color: rgba(247, 248, 249, 1);
			border-radius: 6rpx;
			.vipIcon{
				display: block;
				height: 22rpx;
				width: 28rpx;
			}
			&>view{
				flex: 1;
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #777676;
				margin-left: 17rpx;
			}
			.backIcon{
				display: block;
				height: 17rpx;
				width: 17rpx;
			}
		}
	}
	.name{
		// display: flex;
		// flex-direction: row;
		// justify-content: flex-start;
		// flex-wrap: wrap;
		width: 100%;
		padding: 22rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #3C3939;
		background-color: #fff;
		line-height: 48rpx;
		border-radius: 0 0 20rpx 20rpx;
		.ziying{
			display: inline-block;
			width: 63rpx;
			height: 30rpx;
			margin-right: 22rpx;
			background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			border-radius: 15rpx;
			line-height: 30rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.actives{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		background-color: #fff;
		padding: 30rpx 24rpx;
		margin-top: 15rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		.cx{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #B8B8B8;
		}
		.active{
			flex: 1;
			margin: 0 30rpx;
			.item{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				margin-bottom: 15rpx;
				font-size: 23rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #504E4E;
				&>view:nth-child(1){
					height: 32rpx;
					padding: 0 13rpx;
					box-sizing: border-box;
					border-radius: 6rpx;
					background-color: rgba(255, 233, 233, 1);
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FF5B57;
					margin-right: 10rpx;
				}
				&>view:nth-child(2){
					flex: 1;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.yhq{
						position: relative;
						padding: 0 15rpx;
						box-sizing: border-box;
						margin: 5rpx 10rpx;
						color: #D53128;
						&>image{
							position: absolute;
							left: 0;
							top: 0;
							height: 100%;
							width: 100%;
						}
					}
				}
			}
		}
		
	}
	.spec{
		width: 100%;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 15rpx;
		border-radius: 20rpx;
		.goods_spec{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			width: 100%;
			.cx1{
				width: 75rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #B8B8B8;
			}
			.spec_content{
				flex: 1;
				margin-left: 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 23rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #3C3939;
				padding-bottom: 20rpx;
				box-sizing: border-box;
				.content_left{
					&>view{
						margin-bottom: 10rpx;
					}
				}
			}
		}
	
	}
	.evaluate{
		overflow: hidden;
		width: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 15rpx;
		.top{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			.praiseRate{
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				&>image{
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					margin-left: 6rpx;
				}
			}
		}
		.evaluateClassify{
			width: 100%;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
			&>view{
				height: 46rpx;
				width: 120rpx;
				border-radius: 23rpx;
				background-color: rgba(52, 195, 158, 1);
				text-align: center;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 46rpx;
				margin: 0 20rpx;
			}
		}
	}
	.comment{
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(210, 210, 210, 1);
		.user{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			height: 70rpx;
			&>image{
				display: block;
				height: 70rpx;
				width: 70rpx;
				margin-right: 15rpx;
				border-radius: 50%;
			}
			.userMsg{
				display: flex;
				flex-direction: column;
				justify-content: center;
				.user_name{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		.comment_content{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			&>view:nth-child(2){
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				flex-wrap: wrap;
				&>image{
					display: block;
					height: 205rpx;
					width: 205rpx;
					border-radius: 10rpx;
					margin: 0 10rpx;
				}
			}
		}
	}
	.allComments{
		height: 60rpx;
		width: 174rpx;
		border-radius: 30rpx;
		border: 1rpx solid #959595;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 60rpx;
		margin: 25rpx auto;
	}
	
	.goodInfo{
		width: 100%;
		background-color: #fff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		.info_title{
			height: 105rpx;
			padding-left: 36rpx;
			line-height: 105rpx;
		}
		.fuwenben{
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		&>image{
			
		}
	}
	
	.bottomBar{
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 135rpx;
		background-color: #fff;
		padding: 20rpx 20rpx 33rpx 20rpx;
		box-sizing: border-box;
		.bottom_left{
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			height: 100%;
			.item{
				// flex: 1;
				position: relative;
				margin-right: 10rpx;
				height: 70rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				text-align: center;
				color: #999999;
				.num{
					position: absolute;
					right: 0;
					top: 0;
					width: 30rpx;
					height: 30rpx;
					background-color: #FF4444;
					color: #FFFFFF;
					text-align: center;
					border-radius: 50%;
					font-size: 20rpx;
					line-height: 30rpx;
				}
				&>image{
					display: block;
					height: 43rpx;
					width: 43rpx;
					margin: 0 auto;
				}
			}
		}
		.bottom_right{
			width: 468rpx;
			height: 100%;
			line-height: 82rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			&>view{
				display: inline-block;
				width: 234rpx;
				height: 100%;
				text-align: center;
				background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
				border-radius: 41rpx 0px 0px 41rpx;
			}
			&>view:nth-child(2){
				background: linear-gradient(90deg, #FF6B4D, #FC3629);
				border-radius: 0px 41rpx 41rpx 0px;
			}
		}
	}
	//  促销弹出框样式
	.cx_mask{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 101;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,.6);
		.cx_message{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 16rpx 30rpx 41rpx 30rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			.close_img {
				position: absolute;
				right: 25rpx;
				top: 25rpx;
				width: 28rpx;
				height: 28rpx;
				z-index: 102;
			}
			.cx_title{
				text-align: center;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #242424;
				padding: 20rpx 0;
				box-sizing: border-box;
				
			}
			.to_address_top {
				width: 100%;
				position: relative;
				font-size: 38rpx;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 36rpx;
				text-align: center;
				margin-bottom: 67rpx;
			
				
			
			}
			
			.to_address_item {
				margin-bottom: 50rpx;
				width: 100%;
				// height: 66rpx;
				display: flex;
				justify-content: flex-start;
				// justify-content: space-between;
				align-items: center;
			
				.check_box {
					flex-shrink: 0;
					width: 32rpx;
					height: 32rpx;
					position: relative;
					margin-right: 26rpx;
			
					img {
						widows: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
					}
				}
			
				.txt_box {
					font-size: 26rpx;
					font-weight: blod;
				}
			}
			
			.button_box {
				height: 90rpx;
				background: linear-gradient(90deg, #FF6B4D, #FC3629);
				border-radius: 45rpx;
				width: 100%;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				line-height: 90rpx;
				color: white;
				margin-bottom: 70rpx;
			}
			
		}
	}
</style>
